<template>
  <div class="pager-container">
    <el-config-provider :locale="zhCn">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[12, 20, 40, 60]"
        :small="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="amount"
        @change="sendChangePageEvent"
        :pager-count="15"
        :default-page-size="12"
      />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { ref , onMounted } from "vue"
import emitter from "@/utils/mitt.ts"
import { ElConfigProvider } from "element-plus"
import zhCn from "element-plus/es/locale/lang/zh-cn"

const amount = ref<number>(0)
const currentPage = ref()
const pageSize = ref()

const currentSet = ref()

type modeType = "search" | "filter" | "browse"
const mode = ref<modeType>('browse')

onMounted(() => {
  emitter.on("DM:set-change", (data : any) => {
    currentSet.value = data
    amount.value = data ? data.imageAmount : 0
    currentPage.value = 1
    mode.value = 'browse'
    sendChangePageEvent()
  })

  emitter.on("DM:search-image-start", (data : any) => {
    currentSet.value = data
    amount.value = 10
    currentPage.value = 1
    mode.value = 'search'
    sendChangePageEvent()
  })

  emitter.on("DM:filter-image-start", (data : any) => {
    currentSet.value = data.data
    amount.value = 10
    currentPage.value = 1
    mode.value = 'filter'
    sendChangePageEvent()
  })

  emitter.on("DM:image-amount",(data:any) => {
    amount.value = data
  })

  document.getElementsByClassName("el-pagination__jump")[0].removeAttribute("disabled")
})

function sendChangePageEvent() {
  emitter.emit("DM:page-change", {
    type: mode.value,
    data: currentSet.value,
    page: currentPage.value,
    size: pageSize.value || 12
  })
}
</script>

<style lang="scss" scoped>
.pager-container {
  display: flex;
  justify-content: center;
  margin: {
    top: 8px;
  };
  user-select: none;
}
</style>
